<template>
  <div class="app-container">
    <div class="header">
      <!--搜索    -->
      <el-form :model="queryParams" ref="queryFormRef" class="demo-form-inline" :inline="true">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="queryParams.menuName"
            placeholder="请输入菜单名称"
            clearable
            @keyup.enter.native="handleMenuQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleMenuQuery"> 搜索 </el-button>
          <el-button icon="Refresh" @click="resetQuery(queryFormRef)"> 重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <div class="util">
        <el-button
          type="primary"
          plain
          icon="CirclePlus"
          v-hasPermi="['system:menu:add']"
          @click="addMenu({ parentId: 0 })"
        >
          新增
        </el-button>
        <el-button type="info" plain icon="Sort" @click="toggleExpandAll"> 展开/折叠</el-button>
      </div>

      <!--表格展示数据    -->
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="menuList"
        row-key="menuId"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="menuName"
          label="菜单名称"
          :show-overflow-tooltip="true"
          width="160"
        ></el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="60">
          <template v-slot="scope">
            <SvgIcon :icon-class="scope.row.icon" class-name="icon" />
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" align="center" width="60"></el-table-column>
        <el-table-column
          prop="perms"
          label="权限标识"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="component"
          label="组件路径"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template v-slot="scope">
            <DictTag :options="dict.type.sys_normal_disable" :value="scope.row.status"></DictTag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="260px"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="success"
              icon="Plus"
              @click="addMenu({ parentId: scope.row.menuId })"
              v-hasPermi="['system:menu:add']"
            >
              添加
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="EditPen"
              @click="editMenu(scope.row)"
              v-hasPermi="['system:menu:edit']"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              icon="Delete"
              @click="deleteMenu(scope.row.menuId)"
              v-hasPermi="['system:menu:remove']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="table-wrap"> </div>

    <!--对话框    -->
    <MenuDialog
      ref="menuDialogRef"
      :menuOptions="menuList"
      @handleMenuQuery="handleMenuQuery"
    ></MenuDialog>
  </div>
</template>

<script lang="ts" setup>
  /*/!*生命周期*!/*/
  import { getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue'
  import { reqMenuDeleteUrl, reqMenuPageListUrl } from '@/api/system/menu'
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import MenuDialog from './components/menuDialog.vue'
  import { FormInstance } from 'element-plus'
  import DictTag from '@/components/DictTags/index.vue'

  const menuList = ref([]) //表格菜单信息
  const refreshTable = ref(true) // 重新渲染表格状态
  const loading = ref(true) // 遮罩层
  const isExpandAll = ref(false) // 是否展开，默认全部折叠
  const menuDialogRef = ref()
  const queryFormRef = ref()
  const { proxy }: any = getCurrentInstance()

  //查询参数
  const queryParams = reactive({
    menuName: '', //菜单名,
    status: '', //菜单状态,
  })

  //查询按钮
  const handleMenuQuery = async () => {
    //遮罩层打开
    loading.value = true
    //获取菜单数据
    await reqMenuPageListUrl(queryParams).then((req: any) => {
      menuList.value = proxy.$handleTree(req.data.menuList, 'menuId')
      if (req.code === 200) {
        menuList.value = proxy.$handleTree(req.data.menuList, 'menuId')
      } else {
        menuList.value = null
      }
      // 遮罩层关闭
      loading.value = false
    })
  }

  //新增菜单
  const addMenu = (item = {}) => {
    menuDialogRef.value.show(item)
  }

  //修改菜单
  const editMenu = (item) => {
    menuDialogRef.value.show(item)
  }

  //删除菜单
  const deleteMenu = (menuId) => {
    /*先判断是否要删除该数据*/
    proxy.$modal
      .confirm('是否删除该菜单?')
      .then(async () => {
        let result: any = await reqMenuDeleteUrl(menuId)
        if (result.code == 200) {
          proxy.$modal.msgSuccess('删除成功')
          await handleMenuQuery() /*刷新*/
        } else {
          proxy.$modal.msgError(result.message != null ? result.message : '删除失败')
        }
      })
      .catch((e: any) => {
        console.log(e.message)
      })
  }

  /*菜单折叠*/
  const toggleExpandAll = () => {
    refreshTable.value = false
    isExpandAll.value = !isExpandAll.value
    /*再次对数据进行渲染*/
    nextTick().then(() => {
      refreshTable.value = true
    })
  }

  // 重置按钮
  const resetQuery = (formEl: FormInstance | undefined) => {
    // 将信息都进行重置
    formEl.resetFields()
    Object.keys(queryParams).forEach((key) => {
      queryParams[key] = null
    })
    handleMenuQuery()
  }

  onMounted(() => {
    handleMenuQuery() //获取菜单信息
  })
</script>
<script lang="ts">
  export default {
    dicts: ['sys_normal_disable'],
  }
</script>

<style scoped lang="scss">
  @import './index';

  .header {
    display: flex;
    padding: 16px 16px 0px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  }

  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    position: relative;
    box-sizing: border-box;

    .util {
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .table-wrap {
      flex: 1;
      display: flex;
      position: relative;
      overflow: hidden;
    }

    .table-inner {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .table {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
</style>
